        .button {
            text-decoration: none;
            display: inline-block;
            height: 100%;
            width: 100%;
            background-color:rgba(168, 40, 53, 1);
            line-height: 232%;
            text-align: center;
            position: relative;
            color: #f7f7f7;
        }


        .button:before,
        .button:after
        {
            -webkit-transition: .3s ease;
            transition: .3s ease;
            text-decoration:none;
        }

        /* button-1 */
        .button-1:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border: 1px solid rgba(168, 40, 53, 1);
            box-sizing: border-box;
            text-decoration:none;
            
        }

        .button-1:hover:before {
            width:90%;
            height: 80%;
            border: 1px solid #f7f7f7;
            text-decoration:none;
        }
        .button-1:hover {
            color: #f7f7f7;
            text-decoration:none;
        }
        /* button-2 */
        .button-2:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            border: 1px solid rgba(168, 40, 53, 1);
            box-sizing: border-box;
            text-decoration:none;
        }
        .button-2:hover:before {
            width:90%;
            height: 80%;
            border: 1px solid rgba(168, 40, 53, 1);
            text-decoration:none;
        }
        .button-2:hover {
            color: rgba(168, 40, 53, 1);
            text-decoration:none;
        }      

        /* button-4 */
        .button-4 {
            color: white;
            z-index: 3;
            height: 50px;
            background-color: transparent;
            box-sizing: border-box;
            border: 1px solid rgba(168, 40, 53, 1);
            text-decoration:none;
        }

        .button-4:before {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: -2;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            box-sizing: border-box;
            background-color: rgba(168, 40, 53, 1);
            text-decoration:none;
        }

        .button-4:hover:before {
            width: 100%;
            height: 2px;
            text-decoration:none;
        }

        .button-4:hover {
            color: rgba(168, 40, 53, 1);
            text-decoration:none;
        }

